﻿@page
@model ToolGood.FlowVision.Pages.Members.Apps.InitValue.EditModel
@{
	Layout = "~/Pages/Shared/_Layout_Edit.cshtml";
}
@section css{
	<style>
		.layui-table td, .layui-table th { padding: 3px; }
		.layui-form-item .layui-form-checkbox[lay-skin=primary] { margin-top: 5px; margin-bottom: 5px; }
		.editor { top: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
		.ace_text-layer .ace_rightAlignedText .ace-cjk { font-size: 12px !important; }
		div.layui-input.editor-div { padding: 0; height: initial }
		div.layui-input.editor-div2 { padding: 0; display: inline-block; width: calc(100% - 38px); height: initial }
	</style>
}

	<div style="overflow-x:hidden;background-color:#f3f3f4;height: 100%;">
		<form id="edit-form" style="height: 100%;">
			<input type="hidden" name="id" value="@Model.Dto.Id" />
			<input type="hidden" name="ProjectId" value="@Model.Dto.ProjectId" />
			@Html.AntiForgeryToken()
			<div class="layui-form layui-form-sm" lay-filter="form" style="padding: 20px 30px 0 0;">
				<div class="layui-form-item-sm">
					<label class="layui-form-label-sm">流程名称<span class="red"> *</span></label>
					<div class="layui-input-block-sm">
					@foreach (var app in Model.Apps) {
						<input type="checkbox" name="AppIds[]" lay-skin="primary" value="@(app.Id)" title="@(app.Name)" @(Model.AppIds.Contains(app.Id).ToChecked()) />
					}
				</div>
			</div>
			<div class="layui-form-item-sm" style=" margin-bottom: 6px;">
				<label class="layui-form-label-sm">变量名称<span class="red"> *</span></label>
				<div class="layui-input-block-sm">
					<input type="text" class="layui-input layui-input-sm" id="txt_Name" name="Name" value="@Model.Dto.Name">
				</div>
			</div>
			<div class="layui-form-item-sm">
				<label class="layui-form-label-sm">值类型<span class="red"> *</span></label>
				<div class="layui-input-block-sm">
					<input type="checkbox" name="InputType" lay-skin="primary" value="number" title="数字" lay-filter="type" @(Model.Dto.InputType.ToCheckedWhenIs("number")) />
					<input type="checkbox" name="InputType" lay-skin="primary" value="bool" title="布尔值" lay-filter="type" @(Model.Dto.InputType.ToCheckedWhenIs("bool")) />
					<input type="checkbox" name="InputType" lay-skin="primary" value="string" title="文本" lay-filter="type" @(Model.Dto.InputType.ToCheckedWhenIs("string")) />
					<input type="checkbox" name="InputType" lay-skin="primary" value="date" title="时间" lay-filter="type" @(Model.Dto.InputType.ToCheckedWhenIs("date")) />
					<input type="checkbox" name="InputType" lay-skin="primary" value="list" title="集合" lay-filter="type" @(Model.Dto.InputType.ToCheckedWhenIs("list")) />
				</div>
			</div>
			<div class="layui-form-item-sm">
				<label class="layui-form-label-sm">条件公式</label>
				<div class="layui-input-block-sm">
					<table id="list" class="layui-table" lay-size="sm">
						<tr ondrop="onDrop(event)" ondragstart="dragStart(event)" ondragover="onDragOver(event)" draggable="false" ondragenter="dragEnter(event)">
							<td>内容</td>
							<td width="40">操作</td>
						</tr>
					</table>
					<a href="javascript:;" onclick="addCondition()" style="color:blue">增加条件公式</a>
					&nbsp;&nbsp;&nbsp;&nbsp;注：条件顺序：从上到下
				</div>
			</div>


			<div class="layui-form-item-sm">
				<label class="layui-form-label-sm">选项</label>
				<div class="layui-input-block-sm">
					<input type="checkbox" name="IsThrowError" lay-skin="primary" value="true" title="检测失败抛出错误" @(Model.Dto.IsThrowError.ToChecked()) />
				</div>
			</div>

			<div class="layui-form-item-sm">
				<label class="layui-form-label-sm">抛错信息</label>
				<div class="layui-input-block-sm">
					<input type="text" class="layui-input layui-input-sm" id="txt_ErrorMessage" name="ErrorMessage" value="@Model.Dto.ErrorMessage" autocomplete="off">
				</div>
			</div>


			<div class="layui-form-item-sm">
				<label class="layui-form-label-sm">备注</label>
				<div class="layui-input-block-sm">
					<textarea class="layui-textarea layui-textarea-sm" id="txt_Comment" name="Comment">@(Model.Dto.Comment.ToHtml())</textarea>
				</div>
			</div>

			<div class="layui-form-item-sm" style="text-align:center;padding-left: 30px;">
				<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="save(this);"> &nbsp;&nbsp; 提 交 &nbsp;&nbsp; </button>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="closeWindow();"> &nbsp;&nbsp; 关 闭 &nbsp;&nbsp; </button>
			</div>
		</div>
	</form>
</div>
<script type="text/x-template" id="tpl" style="display:none">
	<tr ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragenter="dragEnter(event)"  draggable="true" ondragstart="dragStart(event)">
		<td>
			<label style="top: 15px;">条件：</label>
			<input type="hidden" id="txt_conditionXXXX" name="settingFormula[XXXX].condition" />
			<div class="layui-input editor-div2">
				<div id="txt_condition-editorXXXX" class="editor"> </div>
			</div><br />
			<label style="top: 58px;">公式：</label>
			<input type="hidden" id="txt_formulaXXXX" name="settingFormula[XXXX].formula" />
			<div class="layui-input editor-div2">
				<div id="txt_formula-editorXXXX" class="editor"> </div>
			</div>
		</td>
		<td>
			<span style="color:blue;cursor:all-scroll;"  >拖动</span><br style="margin-bottom: 5px;" />
			<a class="delete" href="javascript:;">删除</a>
		</td>
	</tr>
</script>

@section js{
	<script src="/_/inputcontrol/toolgood.algorithm.js"></script>
	<script src="/_/inputcontrol/ace/ace.js"></script>
	<script src="/_/inputcontrol/ace/ext-language_tools.js"></script>
	<script src="/_/inputcontrol/AceKeywords.js?pid=@(Model.Dto.ProjectId)"></script>
	<script src="/_/inputcontrol/my-keywords.js"></script>
	<script src="/_/inputcontrol/createeditor.js"></script>

	<script>
		layui.use(['element', 'form'], function () {
			var form = layui.form;
			form.on('checkbox(type)', function (data) {
				$("input[name='InputType']").prop("checked", false);
				$(this).prop("checked", true);
				form.render('checkbox');
			});
			form.render('checkbox');
		});
	</script>
	<script>
		function addCondition() {
			var html = $("#tpl").html();
			var t = new Date().valueOf();
			html = html.replace(/XXXX/ig, t);
			$("#list").append($(html));
			createEditor("txt_condition-editor" + t, "txt_condition" + t)
			createEditor("txt_formula-editor" + t, "txt_formula" + t)
		}
		$(document).on("click", ".delete", function (event) {
			event && event.stopPropagation();
			$this = $(this);
			top.layer.confirm('删除当前的公式吗?', function (index) {
				$this.parents("tr").remove();
				top.layer.close(index);
			})
			return false;
		});
	</script>
	<script>
		$(function () {
			var conditions = @Model.Dto.SettingFormula.ToHtml();
			for (var i = 0; i < conditions.length; i++) {
				var html = $("#tpl").html();
				var t = new Date().valueOf();
				html = html.replace(/XXXX/ig, i);
				$("#list").append($(html));
				$("#txt_condition" + i).val(conditions[i].condition);
				$("#txt_formula" + i).val(conditions[i].formula);
				createEditor("txt_condition-editor" + i, "txt_condition" + i)
				createEditor("txt_formula-editor" + i, "txt_formula" + i)
			}
		})
		function save(obj) {
			if ($("#txt_AppId").val() == 0) { layer.alert("请选择流程"); return; }
			if ($("#txt_Name").val().length < 1) { layer.alert("请输入名称"); $("#txt_Name").focus(); return; }

			var name = $("#txt_Name").val().toLowerCase();
			if (/^[\d].*/ig.test(name)) { layer.alert("变量名称有误"); $("#txt_Name").focus(); return; }
			if (/[ \t\+\-\*\/\(\)\\\[\]]/ig.test(name)) { layer.alert("变量名称有误"); $("#txt_Name").focus(); return; }
			for (var i = 0; i < ace_keywords2.length; i++) {
				if (ace_keywords2[i]["key"].toLowerCase() == name) { layer.alert("变量名称有误,不能使用当前变量名"); $("#txt_Name").focus(); return; }
			}

			$(obj).prop("disabled", true);
			var url = "./Ajax/EditItem";
			var data = {
				data: $("#edit-form").serializeJson(),
				fingerprint: window.fingerprint
			}
			data.data.AppIds = data.data.AppIds.join(",");
			data.data.settingFormula = JSON.stringify(data.data.settingFormula)
			$.ajax({
				type: "POST",
				url: url,
				contentType: "application/json;charset=UTF-8",
				data: JSON.stringify(data),
				headers: { __RequestVerificationToken: data.data["__RequestVerificationToken"] },
				dataType: "JSON",
				success: function (data, textStatus, jqXHR) {
					if (data.state == "SUCCESS") {
						closeWindowAndReload();
					} else {
						$(obj).prop("disabled", false);
						if (data.message) {
							layer.msg(data.message);
						} else {
							layer.msg("出错了");
						}
					}
				},
				error: function (data, textStatus, errorThrown) { $(obj).prop("disabled", false); layer.msg("出错了"); }
			});


		}
	</script>
	<script>
		let moveNode = null;
		function onLeave(event) { }
		function onDrop(event) {
			event.preventDefault();
			moveNode.style.opacity = '1';
			if ($(event.target).parents("table")[0] != $(moveNode).parents("table")[0]) { return; }
			if (event.target.parentNode.tagName == "TR") {
				if (moveNode.tagName == "TR") {
					$(event.target.parentNode).after($(moveNode))
				} else {
					$(event.target.parentNode).after($(moveNode).parents("tr"))
				}
			}
		}
		function onDragEnter(event) { event.preventDefault(); }
		function onDrag(event) { event.preventDefault(); }
		function onDragOver(event) { event.preventDefault(); }
		function dragStart(event) { moveNode = event.target; event.target.style.opacity = '0.5'; }
		function dragEnter(event) {
			if ($(event.target).parents("table")[0] != $(moveNode).parents("table")[0]) { return; }
			if (event.target.parentNode.tagName == "TR") {
				if (moveNode.tagName == "TR") {
					$(event.target.parentNode).after($(moveNode))
				} else {
					$(event.target.parentNode).after($(moveNode).parents("tr"))
				}
			} else {
				event.preventDefault();
			}
		}
	</script>
}